<!--
 * @Description: 数据卡片组件
 * @Author: Huang Junjie
 * @Date: 2021-06-01 11:34:58
 * @LastEditTime: 2021-10-13 17:04:40
 * @LastEditors: Liu Zhiwang
-->
<template>
  <div class="data-card-style">
    <!-- <el-scrollbar> -->
    <div class="first-card-item">
      <img class="img" :src="require('@/assets/images/jjxt/production-safety/bureau-level-home/card-bg.png')">
      <div class="content">
        <el-row>
          <el-col class="img-col" :span="8">
            <img class="img" :src="require('@/assets/images/jjxt/production-safety/bureau-level-home/card-icon-01.png')">
          </el-col>
          <el-col :span="16">
            <div class="text-one">{{ getDatatime(new Date(), 0, 10) }}</div>
            <div class="text-two">日交班信息</div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="card-item">
      <img class="img" :src="require('@/assets/images/jjxt/production-safety/bureau-level-home/card-bg.png')">
      <div class="content">
        <el-row>
          <el-col class="img-col" :span="8">
            <img class="img" :src="require('@/assets/images/jjxt/production-safety/bureau-level-home/card-icon-02.png')">
          </el-col>
          <el-col :span="16">
            <div class="text-one">
              <div>当月事故：</div>
              <div class="num">{{ monthlyAccidentData.nowMonthTotal }}</div>
            </div>
            <div class="card">
              <el-row>
                <el-col :span="12">
                  <div v-show="monthlyAccidentData.tongbiFlag === 0" class="active-card">同比 --</div>
                  <div v-show="monthlyAccidentData.tongbiFlag === 1" class="active-card">
                    同比 {{ monthlyAccidentData.tongbiPercentage && monthlyAccidentData.tongbiPercentage.toFixed(2) * 100 }}%
                    <img class="img-icon" :src="require('@/assets/images/jjxt/production-safety/bureau-level-home/red-rise-icon.png')">
                  </div>
                  <div v-show="monthlyAccidentData.tongbiFlag === -1" class="active-card">
                    同比 {{ monthlyAccidentData.tongbiPercentage && monthlyAccidentData.tongbiPercentage.toFixed(2) * 100 }}%
                    <img class="img-icon" :src="require('@/assets/images/jjxt/production-safety/bureau-level-home/red-decline-icon.png')">
                  </div>
                </el-col>
                <el-col :span="12">
                  <div v-show="monthlyAccidentData.huanbiFlag === 0" class="not-active-card">环比 --</div>
                  <div v-show="monthlyAccidentData.huanbiFlag === 1" class="not-active-card">
                    环比 {{ monthlyAccidentData.huanbiPercentage && monthlyAccidentData.huanbiPercentage.toFixed(2) * 100 }}%
                    <img class="img-icon" :src="require('@/assets/images/jjxt/production-safety/bureau-level-home/yellow-rise-icon.png')">
                  </div>
                  <div v-show="monthlyAccidentData.huanbiFlag === -1" class="not-active-card">
                    环比 {{ monthlyAccidentData.huanbiPercentage && monthlyAccidentData.huanbiPercentage.toFixed(2) * 100 }}%
                    <img class="img-icon" :src="require('@/assets/images/jjxt/production-safety/bureau-level-home/yellow-decline-icon.png')">
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="card-item">
      <img class="img" :src="require('@/assets/images/jjxt/production-safety/bureau-level-home/card-bg.png')">
      <div class="content">
        <el-row>
          <el-col class="img-col" :span="8">
            <img class="img" :src="require('@/assets/images/jjxt/production-safety/bureau-level-home/card-icon-03.png')">
          </el-col>
          <el-col :span="16">
            <div class="text-one">
              <div>当月故障：</div>
              <div class="num">{{ monthlyFaultData.nowMonthTotal }}</div>
            </div>
            <div class="card">
              <el-row>
                <el-col :span="12">
                  <div v-show="monthlyFaultData.tongbiFlag === 0" class="active-card">同比 --</div>
                  <div v-show="monthlyFaultData.tongbiFlag === 1" class="active-card">
                    同比 {{ monthlyFaultData.tongbiPercentage &&monthlyFaultData.tongbiPercentage.toFixed(2) * 100 }}%
                    <img class="img-icon" :src="require('@/assets/images/jjxt/production-safety/bureau-level-home/red-rise-icon.png')">
                  </div>
                  <div v-show="monthlyFaultData.tongbiFlag === -1" class="active-card">
                    同比 {{ monthlyFaultData.tongbiPercentage && monthlyFaultData.tongbiPercentage.toFixed(2) * 100 }}%
                    <img class="img-icon" :src="require('@/assets/images/jjxt/production-safety/bureau-level-home/red-decline-icon.png')">
                  </div>
                </el-col>
                <el-col :span="12">
                  <div v-show="monthlyFaultData.huanbiFlag === 0" class="not-active-card">环比 --</div>
                  <div v-show="monthlyFaultData.huanbiFlag === 1" class="not-active-card">
                    环比 {{ monthlyFaultData.huanbiPercentage && monthlyFaultData.huanbiPercentage.toFixed(2) * 100 }}%
                    <img class="img-icon" :src="require('@/assets/images/jjxt/production-safety/bureau-level-home/yellow-rise-icon.png')">
                  </div>
                  <div v-show="monthlyFaultData.huanbiFlag === -1" class="not-active-card">
                    环比 {{ monthlyFaultData.huanbiPercentage && monthlyFaultData.huanbiPercentage.toFixed(2) * 100 }}%
                    <img class="img-icon" :src="require('@/assets/images/jjxt/production-safety/bureau-level-home/yellow-decline-icon.png')">
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- </el-scrollbar> -->
  </div>
</template>

<script>
import { getDataCardData } from '@/api/jjxt/production-safety/bureau-level-home';
import { getDatatime } from '@/utils';

export default {
  data() {
    return {
      // 当月事故信息
      monthlyAccidentData: {
        huanbiFlag: 0,
        huanbiPercentage: 0,
        nowMonthTotal: 0,
        tongbiFlag: 0,
        tongbiPercentage: 0
      },

      // 当月故障信息
      monthlyFaultData: {
        huanbiFlag: 0,
        huanbiPercentage: 0,
        nowMonthTotal: 0,
        tongbiFlag: 0,
        tongbiPercentage: 0
      }
    };
  },
  mounted() {
    this.getMonthlyAccidentData(); // 查询当月事故信息
    this.getMonthlyFaultData(); // 查询当月故障信息
  },
  methods: {
    getDatatime,

    // 查询当月事故信息
    getMonthlyAccidentData() {
      getDataCardData({ dictSafeProblemTypeId: 'BUREAU_SAFE_PROBLEM_TYPEA' }).then(res => {
        this.monthlyAccidentData = res.data;
      });
    },

    // 查询当月故障信息
    getMonthlyFaultData() {
      getDataCardData({ dictSafeProblemTypeId: 'BUREAU_SAFE_PROBLEM_TYPEB' }).then(res => {
        this.monthlyFaultData = res.data;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.data-card-style {
  position: relative;
  overflow: hidden;
  .el-scrollbar {
    height: 100%;
    ::v-deep .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
  .first-card-item {
    position: relative;
    margin-top: 0;
    .img {
      width: 454px;
      height: 110px;
    }
    .content {
      position: absolute;
      top: 0;
      width: 100%;
      .img-col {
        text-align: center;
        .img {
          width: 120px;
        }
      }
      .text-one {
        margin-top: 15px;
        font-family: MicrosoftYaHei-Bold;
        font-size: 34px;
        font-weight: Bold;
        font-stretch: normal;
        line-height: 60px;
        letter-spacing: 0px;
        background-image:-webkit-linear-gradient(bottom, #4eb5fe, #0580d0);
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
      }
      .text-two {
        color: #ffffff;
        font-size: 18px;
      }
    }
  }
  .card-item {
    position: relative;
    margin-top: 10px;
    .img {
      width: 454px;
      height: 110px;
    }
    .content {
      position: absolute;
      top: 0;
      width: 100%;
      .img-col {
        text-align: center;
        .img {
          width: 120px;
        }
      }
      .text-one {
        color: #ffffff;
        font-size: 18px;
        margin-top: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        .num {
          line-height: 50px;
          font-family: MicrosoftYaHei-Bold;
          font-size: 34px;
          font-weight: Bold;
          font-stretch: normal;
          line-height: 60px;
          letter-spacing: 0px;
          background-image:-webkit-linear-gradient(bottom, #4eb5fe, #0580d0);
          -webkit-background-clip:text;
          -webkit-text-fill-color:transparent;
        }
      }
      .card {
        width: 80%;
        margin: 0 auto;
        border-radius: 4px;
        border: 1px solid #b2bccb;
        color: #ffffff;
        line-height: 28px;
        text-align: center;
        .active-card {
          display: flex;
          align-items: center;
          justify-content: center;
          background-image: linear-gradient(90deg, #006ae1 0%, #16b7ff 100%), linear-gradient(#4895fc, #4895fc);
          background-blend-mode: normal, normal;
          border-radius: 4px;
          .img-icon {
            margin-left: 5px;
            height: 15px;
            width: 10px;
            object-fit: contain;
          }
        }
        .not-active-card {
          display: flex;
          align-items: center;
          justify-content: center;
          .img-icon {
            margin-left: 5px;
            height: 15px;
            width: 10px;
            object-fit: contain;
          }
        }
      }
    }
  }
}
</style>
